<template>
    <div class="login">
        <Header :loginShowOrNot="shownot" :regist="registText"></Header>
        <div class="content">
            <div class="loginCon">
                <h1>登录</h1>
                <el-form :model="ValidateForm" ref="ValidateForm" status-icon :rules="checkrules" size="medium" label-suffix=" ">
                    <el-form-item
                            prop="tel">
                        <el-input type="tel" v-model="ValidateForm.tel" auto-complete="off" :maxlength="11"
                                  placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                    <el-form-item
                            prop="pass">
                        <el-input type="password" v-model="ValidateForm.pass" auto-complete="off"
                                  placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item
                            prop="verify"
                            v-if="defaultShow" class="verify">
                        <el-input v-model="ValidateForm.verify" auto-complete="off"
                                  placeholder="请输入验证码"></el-input>
                        <img :src="imgCode" alt="">
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ValidateForm')">登录</el-button>
                    </el-form-item>
                    <p>
                        <router-link to="/registered">立即注册</router-link>
                        <router-link to="/findpass">忘记密码</router-link>
                    </p>
                </el-form>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
    import Footer from "./common/Foot";
    import Header from "./common/Head";

    const reg = /^0?1[3|4|5|8|7][0-9]\d{8}$/;
    let passWord = "1234",
        verifycode = "x6ow";
    export default {
        components: {
            Footer,
            Header
        },
        data() {
            let checktel = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入电话号码'));
                } else if (value.length !== 11 || !reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                } else {
                    callback();
                    this.$refs.ValidateForm.validateField('pass');
                }
            };
            let checkpass = (rule, value, callback) => {
                if (value === passWord) {
                    callback();
                    if (this.defaultShow) {
                        this.$refs.ValidateForm.validateField('verify', function (valid) {
                            if (!valid) {
                                alert("submit");
                            }
                        });
                    } else {
                        alert("submit");
                    }
                } else if (value !== "" && value !== passWord) {
                    this.wrongtimes = ++this.wrongtimes;
                    callback(new Error('请输入正确的密码'));
                }
            };
            let checkverifycode = (rule, value, callback) => {
                if (value!=="" && value.toLocaleLowerCase() !== verifycode.toLocaleLowerCase()) {
                    callback(new Error('请输入正确的验证码'));
                } else {
                    if(value.toLocaleLowerCase() === verifycode.toLocaleLowerCase() && value.length === 4){
                        callback();
                    }
                }
            };
            return {
                registText:'注册页面',
                shownot: false,
                defaultShow: false,
                placehl: '',
                wrongtimes: 0,
                ValidateForm: {
                    passMessage: "",
                    tel: '',
                    pass: '',
                    verify: ''
                },
                checkrules: {
                    tel: {
                        //下面trigger里使用input事件不起作用；
                        //使用@在input元素上绑定change事件不起作用，然而input事件可用
                        validator: checktel, trigger: 'blur'
                    },
                    //这里虽然input没有作用，但这里正需要：除了提交表单的时候触发此验证其他情况不会出发此验证
                    pass: {
                        validator: checkpass, trigger: 'input'
                    },
                    verify: {
                        validator: checkverifycode, trigger: 'blur'
                    }
                },
            }
        },
        created() {
            this.imgCode = require('../assets/images/imgCode.png')
        },
        watch: {
            wrongtimes: function () {
                if (this.wrongtimes >= 2) {
                    this.wrongtimes = 2;
                    this.defaultShow = true;
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validateField("tel");
            }
        }
    }
</script>
<style lang="scss" scoped>
    .content {
        color: #333;
        height: 600px;
        background: url("../assets/images/registeredBg.png") no-repeat center top;
        .loginCon {
            width: 380px;
            margin: 0 auto;
            height: 420px;
            background-color: #fff;
            position: relative;
            left: 420px;
            top: 90px;
            h1 {
                font-size: 21px;
                text-align: center;
                padding: 30px 0 45px 0;
                font-weight: normal;
            }
            .el-form {
                width: 290px;
                margin: 0 auto;
            }
            .el-button--medium {
                width: 290px;
                background-color: #ff6235;
            }
            .el-button--primary {
                border-color: #ff6235;
                margin: 38px 0 15px 0;
                height: 40px;
                font-size: 17px;
            }
            .verify {
                position: relative;
                img {
                    position: absolute;
                    right: 0;
                    bottom: 7px;
                    width: 90px;
                    height: 30px;
                    border: 1px solid #dfdfdf;
                    &:hover {
                        cursor: pointer;
                    }
                }
                & + .el-form-item {
                    .el-button--primary {
                        margin-top: 20px;
                    }
                }
            }
            p:last-child {
                text-align: center;
                a {
                    color: #333;
                    display: inline-block;
                    transition: color 0.3s ease-out;
                    font-size: 15px;
                    &:first-child {
                        position: relative;
                        padding-right: 9px;
                        margin-right: 7px;
                        &:after {
                            position: absolute;
                            content: "";
                            width: 1px;
                            height: 10px;
                            background-color: #dfdfdf;
                            right: -1px;
                            top: 6.3px;
                        }
                    }
                    &:hover {
                        color: #ff6235;
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .loginCon {
        .el-form {
            .el-input__inner {
                border-left: none;
                border-right: none;
                border-top: none;
                padding: 0;
            }
            ::-webkit-input-placeholder {
                color: #999;
            }
            :-moz-placeholder {
                color: #999;
                opacity: 1;
            }
            ::-moz-placeholder {
                color: #999;
                opacity: 1;
            }
            :-ms-input-placeholder {
                color: #999;
            }
            .is-checked {
                .el-checkbox__inner {
                    background-color: #2ab519;
                    border-color: #2ab519;
                    &:hover {
                        border-color: #2ab519;
                    }
                }
            }
            .el-checkbox__inner {
                &:hover {
                    border-color: #2ab519;
                }
            }
            .el-checkbox__label {
                font-size: 13px;
                color: #333;
            }

        }
        .el-form-item__content {
            text-align: center;
        }
        .el-form-item {
            &:nth-last-child(2) {
                margin-bottom: 0;
            }
        }
    }
</style>